.frame {
  border: 1px solid black;
  padding: 6px;
}
body {
    font-family: Calibri,Arial,sans-serif;
    font-size: 150%;
    margin: 0 70px 70px 70px;
}
a[href ^= "http"]:after {
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}		
.hidden {
    display: none;
}
.code {
    font-family: monospace;
    font-weight: bold;
    color: #0000cc;
    border: 1pt solid #0000cc;
    white-space: pre-wrap;
}
td { 
    padding: 5px;
}
.expert {
    font-size: 130%;
}
.small {
}
.large {
  font-size: 1.3em;
}
/*
.prompt {
  font-size: 1.3em;
  font-weight: bold;
  color: #0235c4;
  font-style: italic;
}
*/
.prompt {
  background-color: #e8e8e8;
  /* border-left: 5px solid #0235c4; */
  padding: 8px;
  border-radius: 6px;
  margin-left: 10%;
  margin-bottom: 12px;
}
.chatbot {
  background-color: #f0f0f0;
  /* border-left: 5px solid #888; */
  padding: 8px;
  border-radius: 6px;
  margin-right: 15%;
  margin-bottom: 12px;
}
.prompt > p {
  margin: 0.5em 0;
}
.chatbot > p {
  margin: 0;
}
.box {
  border: 1px solid #888;
  padding: 0.8em;
  margin: 1em 0;
}
.box > :first-child {
  margin-top: 0;
}
.box > :last-child {
  margin-bottom: 0;
}
.float-right {
    float: right;
    margin: 0 0 1em 1em;
}
.float-left {
    float: left;
    margin: 0 1em 1em 0;
}
.spacer {
    height: 2em;
}
.tip {
    background: #eef6ff;
    border-left: 5px solid #4a90e2;
    padding: 14px 16px 14px 68px;
    margin: 1em 0;
    border-radius: 6px;
    position: relative;
}
.tip::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    background-image: url("../ressources/tipp.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Pandoc erzeugt oft p-Tags innerhalb des div */
.tip p:first-child {
    margin-top: 0;
}
.tip p:last-child {
    margin-bottom: 0;
}
body {
    counter-reset: aufgabe frage;
}
.aufgabe {
    counter-increment: aufgabe;
}
.frage {
    counter-increment: frage;
}
.aufgabe {
    background: #fff7e8;
    border-left: 5px solid #f0a000;
    padding: 14px 16px 14px 68px;
    margin: 1em 0;
    border-radius: 6px;
    position: relative;
}
.aufgabe::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    background-image: url("../ressources/aufgabe.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Aufgabe + Dauer */
.aufgabe::before {
    content: "Aufgabe " counter(aufgabe) " (" attr(data-dauer) " min)";
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
}

.aufgabe p:first-child {
    margin-top: 0;
}

.aufgabe p:last-child {
    margin-bottom: 0;
}

.frage {
    background: #f3eefc;
    border-left: 5px solid #f0a000;
    padding: 14px 16px 14px 68px;
    margin: 1em 0;
    border-radius: 6px;
    position: relative;
}
.frage::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    background-image: url("../ressources/frage.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Aufgabe + Dauer */
.frage::before {
    content: "Frage " counter(frage) " (" attr(data-dauer) " min)";
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
}
.frage p:first-child {
    margin-top: 0;
}
.frage p:last-child {
    margin-bottom: 0;
}

.optional {
    /* background: #ffeef6; */
    /* border-left: 5px solid #e24a90; */
    background: #eeeeee;
    border-left: 5px solid #4a4a4a;
    padding: 14px 16px 14px 68px;
    margin: 1em 0;
    border-radius: 6px;
    position: relative;
}
.img-right-for-prompt {
    display: block;
    margin-left: auto;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 2px;
}
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 6px;
}
.no-borders {
  border-collapse: collapse;
}
.no-borders th,
.no-borders td {
  border: none;
}
.speaker-notes {
  display: none;
}
.slide-only {
  display: none;
}
<style>